<template>
  <div v-show="visible && length > 0" class="flex justify-between p5px bg-#EEE">
    <ElStatistic v-for="(value, statName) in unit.statData" :key="statName" :title="stats[statName]?.label" :value="value" />
  </div>
</template>
<script setup lang="ts">
  import { ElStatistic } from 'element-plus'
  import { computed, inject, ref, unref } from 'vue'
  import { Stat, Unit } from '@/seed-application/types'
  import { unitKey } from '@/seed-application'

  const props = defineProps<{stats?: Record<string, Stat>}>()
  const stats = computed(() => props.stats || {})

  const unit = inject<Unit>(unitKey, void 0)

  const length = computed(() => Object.keys(unit.statData).length)
  const visible = ref(false)
  const show = () => visible.value = true
  const hide = () => visible.value = false
  const toggle = () => visible.value = !unref(visible)

  defineExpose({ visible, show, hide, toggle, length })
</script>